<template>
    <div>
        <van-search 
        v-model="search"
        placeholder="请输入搜索关键字"
        input-align="center"
        @search="onSearch"
        />
        <div class="wrapper" ref="wrapper">
            <ul class="category" ref="category">
                <li 
                v-for="(item, index) in djcategories"
                :key="index">
                <div>
                    <van-image :src="item.pic56x56Url" radius="0.5rem" width="3rem"/>
                </div>
                <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";
import { betterScrollHorizontal } from "../../../common/betterScroll"; //引入betterscroll

export default{
    data(){
        return{
            search: "",
            djcategories:[],//分类
        };
    },
    created() {
        this.getcategoryData();
    },
    methods:{
        onSearch(val) {
            Toast(val);
        },
        getcategoryData(){
            this.$request("get","/dj/catelist").then((res) => {
                    console.log(res);
                    this.djcategories = res.categories;
                    betterScrollHorizontal(
                      this,
                      this.$refs.wrapper,
                      this.$refs.category,
                      this.djcategories.length,
                      5
                    ); //调用横向滚动的方法
                },
            );
        },
    },
};
</script>
<style scoped>
/* 分类 */
.wrapper {
  width: 100%;
  overflow: hidden;
}
ul.category li{
    display: inline-block;
    width: 5rem;
    vertical-align: top;
}
ul.category li * {
    margin: 0.1rem 0 0.1rem 0;
}
ul.category li > span{
    font-size: 0.8rem;
}
</style>